<template>

 
  <div style="clear: both;border:1px solid lightgray;padding:10px 5px;min-width: 1200px;">
    <div style="width: 100%;display: flex;">
      <div style="width: 60%">
        <Input v-model="url.main" placeholder="请输入url" style="width: 100%">
        <span slot="prepend">
          <Select v-model="httpMethod" style="width: 80px">
            <Option value="GET">GET</Option>
            <Option value="POST">POST</Option>
            <Option value="PUT">PUT</Option>
            <Option value="DELETE">DELETE</Option>
            <Option value="PATCH">PATCH</Option>
            <Option value="HEAD">HEAD</Option>
            <Option value="OPTION">OPTION</Option>
          </Select>
          <Select v-model="httpProtocol" style="width: 80px">
            <Option value="http">http</Option>
            <Option value="https">https</Option>
          </Select>
        </span>
        </Input>
      </div>
      <div style="width: 40%">
        <Button style="width: 30%; margin-left: 5px;" type="primary" @click="load" :disabled="loading">
          <span v-if="loading">请求中...</span>
          <span v-else>发送</span>
        </Button>

        <Button style="width: 30%; margin-left: 5px;" type="primary" @click="openFiles">
          <span>打开存档</span>
        </Button>

        <Button style="width: 30%; margin-left: 5px;" type="primary" @click="handleSaveStart">
          <span>保存当前内容</span>
        </Button>
      </div>
    </div>
    <div style="width: 100%;">
      <span style="width: 100%;">请求头：</span>
      <InputTable :dataMy="requestParams.head" style="width: 100%;"/>
    </div>

    <div style="width: 100%;">
      <span style="width: 100%;">url后面带的参数(query)：</span>
      <InputTable :dataMy="requestParams.queryString" style="width: 100%;"/>
    </div>



    <Tabs name="request" class="request" v-model="mainTab" :animated="false">
      <TabPane label="请求体 Form" name="form" tab="request">
        <div style="margin:10px 0;">
          content-type
          <Select
            style="width:260px;"
            size="small"
            transfer
            v-model="requestParams.form.contentType"
          >
            <Option value="application/x-www-form-urlencoded">application/x-www-form-urlencoded</Option>
            <Option value="multipart/form-data">multipart/form-data</Option>
          </Select>
        </div>
        <InputTable :dataMy="requestParams.form.data" />
      </TabPane>
      <TabPane label="请求体 Raw" name="raw" tab="request">
        <div style="margin:10px 0;">
          <a style="float:right;" @click="formatJs">格式化</a>
          content-type
          <Select
            style="width:260px;"
            size="small"
            transfer
            v-model="requestParams.raw.contentType"
          >
            <Option value="application/json">application/json</Option>
            <Option value="application/x-www-form-urlencoded">application/x-www-form-urlencoded</Option>
            <Option value="multipart/form-data">multipart/form-data</Option>
            <Option value="text/plain">text/plain</Option>
            <Option value="text/xml">text/xml</Option>
          </Select>
        </div>
         
        <!-- JSON 源码编辑器-->
       <div style="height:100%;">
        <codemirror
          class="code-editor"
          ref="cm"
          v-model="requestParams.raw.json"
          :options="cmOption"
        ></codemirror>
       </div>

      </TabPane>
    </Tabs>

    <Tabs class="response" style="margin-top: ;" name="response" value="responseContent" :animated="false">
      <TabPane tab="response" label="返回内容" name="responseContent">
        <div style="clear:both;height:30px;font-size:8pt;">
          <div style="float:right;height:30px;">Elapsed: {{this.response.elapsed}}ms HTTP status code: <span v-html="formatStatusCode()"></span></div>
        </div>
        <!-- JSON 源码编辑器-->
        <div style="height:100%;">
        <codemirror class="code-editor" v-model="responseBody" :options="cmOption" style="height:300px;"></codemirror>
        </div>
      </TabPane>
      <TabPane tab="response" label="返回头部" name="responseHead">
        <Input type="textarea" :rows="8" :readonly="true" v-model="responseHead" />
      </TabPane>
      <TabPane tab="response" label="请求信息" name="requestHead">
        <Input type="textarea" :rows="8" :readonly="true" v-model="requestAll" />
      </TabPane>
    </Tabs>



  <el-dialog title="查找api请求存档" :visible.sync="openTestApiDialog" width="80%">
    <div style="width: 100%;">
        <el-input v-model="module" style="width: 45%;" placeholder="功能模块"/>
        <el-input v-model="uriPath" style="width: 45%;" placeholder="uriPath"/>
        <el-button @click="handleConditionSelect" style="width: 10%;">查找</el-button>
      </div>
  <el-table :data="fileList">
    <el-table-column property="id" label="id" width="150"></el-table-column>
    <el-table-column property="module" label="功能" width="200"></el-table-column>
    <el-table-column property="des" label="备注" width="200"></el-table-column>
    <el-table-column property="uri" label="uriPath" width="200"></el-table-column>
    <el-table-column property="createTime" label="创建时间" width="150"></el-table-column>
    <el-table-column property="updateTime" label="更新时间" width="150"></el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">打开</el-button>
      </template>
    </el-table-column>
  </el-table>
      <div style="width: 100%; align-items: center; text-align: center;">
        <el-button @click="upPage" style="width: 30%; " :disabled="!upPageAble">上一页</el-button>
        <el-button @click="downPage" style="width: 30%;" :disabled="!downPageAble">下一页</el-button>
      </div>
    </el-dialog>


    <el-dialog   :visible.sync="saveTestApiDialog" width="50%">
      <template #title>
        <span style="color: red;">{{ ifFileExist?'url已存在，确定后将覆盖原来的内容':'新增内容' }}</span>

      </template>
      <span ></span>
      <div style="width: 100%;">
        <el-input v-model="forSaveModule" style="width: 45%;" placeholder="功能模块"/>
        <el-input v-model="forSaveDesc" style="width: 45%;" placeholder="备注"/>
        <el-button @click="handleSave" style="width: 10%;">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script src="./index.js">



</script>

<style lang="less" scoped>
.request {
  clear: both;
}

</style>